<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSite - 自然语言编程的革命性工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight-box {
            border-left: 4px solid #6e8efb;
            transition: all 0.3s ease;
        }
        .highlight-box:hover {
            background-color: #f8fafc;
        }
        .feature-icon {
            color: #6e8efb;
            font-size: 2.5rem;
        }
        .tooltip:hover .tooltip-text {
            opacity: 1;
            visibility: visible;
        }
        .mermaid {
            background-color: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">DeepSite</h1>
                <h2 class="text-2xl md:text-3xl font-semibold mb-6">自然语言即代码的革命性体验</h2>
                <p class="text-lg mb-8 opacity-90">由DeepSeek-V3-0324驱动的开源编程工具，让创意瞬间变为现实应用。无需代码基础，描述您的想法，立即获得完整功能实现。</p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="https://huggingface.co/spaces/enzostvs/deepsite" target="_blank" class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium text-center transition duration-300 transform hover:scale-105">
                        <i class="fas fa-rocket mr-2"></i> 立即体验
                    </a>
                    <a href="#features" class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-600 px-6 py-3 rounded-lg font-medium text-center transition duration-300">
                        <i class="fas fa-info-circle mr-2"></i> 了解更多
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <div class="relative w-full max-w-md">
                    <div class="absolute -top-6 -left-6 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-40"></div>
                    <div class="absolute -bottom-8 -right-8 w-64 h-64 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-40"></div>
                    <div class="relative rounded-2xl bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-white border-opacity-20 overflow-hidden shadow-2xl">
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1743837291683-b471f8f5-e68d-4243-b84b-f8a7fa3a0e71.png" alt="DeepSite界面预览" class="w-full h-auto">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Key Features -->
    <section id="features" class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">为什么选择DeepSite？</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">突破传统编程边界，体验自然语言编程的无限可能</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">零代码开发</h3>
                    <p class="text-gray-600">无需编程基础，通过自然语言指令即可生成游戏、网页应用等完整代码，支持HTML/CSS/JavaScript等多语言混合编程。</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-eye"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">实时交互预览</h3>
                    <p class="text-gray-600">生成代码的同时展示可视化界面，可直接操作按钮、查看动态效果，实现边开发边调试的高效工作流。</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">顶尖AI模型驱动</h3>
                    <p class="text-gray-600">基于DeepSeek-V3-0324大模型，在HumanEval等编码基准测试中表现优异，生成代码质量接近闭源模型水平。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Technical Background -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row gap-12 items-center">
                <div class="md:w-1/2">
                    <h2 class="text-3xl font-bold mb-6">技术背景与性能表现</h2>
                    <div class="space-y-6">
                        <div class="highlight-box p-4 bg-white rounded-lg">
                            <h3 class="font-semibold text-xl mb-2">DeepSeek-V3-0324模型</h3>
                            <p>当前版本仅支持此模型，该模型在编码任务中击败前代R1版本，支持128K上下文长度，可一次性生成数百行代码。</p>
                        </div>
                        <div class="highlight-box p-4 bg-white rounded-lg">
                            <h3 class="font-semibold text-xl mb-2">卓越性能表现</h3>
                            <p>在SWE-bench测试中，其生成的代码准确率显著优于同类开源模型，尤其在游戏逻辑和前端交互实现上表现突出。</p>
                        </div>
                        <div class="highlight-box p-4 bg-white rounded-lg">
                            <h3 class="font-semibold text-xl mb-2">实际案例验证</h3>
                            <p>从简单的贪吃蛇游戏到复杂的电商网站框架，DeepSite已成功生成多种应用，仅需少量人工调整即可投入实际使用。</p>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white p-6 rounded-xl shadow-md">
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1743578008164-5d7b0bdc-4c0c-4381-aad5-d373d2929ba8.png" alt="DeepSeek性能表现" class="w-full rounded-lg">
                        <div class="mt-4 text-sm text-gray-500 text-center">DeepSeek-V3在各类基准测试中的表现优异</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold mb-12 text-center">应用场景与价值</h2>
            
            <div class="grid md:grid-cols-3 gap-8 mb-12">
                <div class="bg-indigo-50 p-6 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                            <i class="fas fa-lightbulb text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-lg">快速原型验证</h3>
                    </div>
                    <p class="text-gray-700">初创团队或个人开发者可用其快速生成MVP（最小可行产品），验证创意可行性，例如生成电商网站框架或小游戏Demo。</p>
                </div>
                
                <div class="bg-purple-50 p-6 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 p-3 rounded-full mr-4">
                            <i class="fas fa-graduation-cap text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-lg">教育与学习</h3>
                    </div>
                    <p class="text-gray-700">编程新手可通过自然语言交互学习代码结构，非技术人员（如产品经理）可直接生成可视化原型，降低沟通成本。</p>
                </div>
                
                <div class="bg-blue-50 p-6 rounded-xl">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-users text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-lg">开源社区协作</h3>
                    </div>
                    <p class="text-gray-700">生成代码支持二次编辑与共享，开发者可基于现有项目进行功能扩展或优化，推动开源生态创新。</p>
                </div>
            </div>
            
            <div class="mermaid">
                graph TD
                    A[自然语言描述需求] --> B(DeepSite处理)
                    B --> C{生成结果}
                    C -->|成功| D[完整功能代码]
                    C -->|需优化| E[调整提示词]
                    D --> F[实时预览]
                    F --> G[下载/部署]
                    E --> B
                    G --> H[实际应用]
            </div>
        </div>
    </section>

    <!-- Case Studies -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold mb-12 text-center">成功案例展示</h2>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1743578757042-6605a81d-8532-41f2-9a43-191865a91b67.png" alt="飞机大战游戏" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="font-bold text-xl mb-2">飞机大战游戏</h3>
                        <p class="text-gray-600 mb-4">通过简单描述"用HTML制作一个飞机大战游戏"，DeepSite生成了完整游戏逻辑和界面。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-indigo-600"><i class="fas fa-code mr-1"></i> HTML/CSS/JS</span>
                            <span class="text-sm text-gray-500">生成时间: 几秒钟</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1743578808275-dc5da7aa-69c9-48d1-a982-c3b2297908e8.png" alt="图片裁剪工具" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="font-bold text-xl mb-2">图片裁剪工具</h3>
                        <p class="text-gray-600 mb-4">描述需求后，DeepSite生成具备完整交互功能的图片裁剪工具界面和逻辑。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-indigo-600"><i class="fas fa-crop mr-1"></i> 图像处理</span>
                            <span class="text-sm text-gray-500">生成时间: 约1分钟</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1743578838122-b9147657-1cd5-4997-8352-395be272c727.png" alt="Word转PDF工具" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="font-bold text-xl mb-2">Word转PDF工具</h3>
                        <p class="text-gray-600 mb-4">简单指令即可生成文档转换工具前端界面和基本转换逻辑。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-indigo-600"><i class="fas fa-file-word mr-1"></i> 文档处理</span>
                            <span class="text-sm text-gray-500">生成时间: 约30秒</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Limitations & Future -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row gap-12">
                <div class="md:w-1/2">
                    <h2 class="text-3xl font-bold mb-6">当前限制</h2>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-red-500"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">生成稳定性不足</h3>
                                <p class="text-gray-600">复杂任务(如3D渲染)易出现逻辑漏洞，需人工介入调试。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-yellow-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-clock text-yellow-500"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">体验次数限制</h3>
                                <p class="text-gray-600">免费版每日仅支持3-4次生成任务，超出后需等待重置。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-blue-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-keyboard text-blue-500"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">依赖提示词质量</h3>
                                <p class="text-gray-600">模糊指令可能导致生成结果偏离预期，需结合具体技术术语优化描述。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <h2 class="text-3xl font-bold mb-6">未来方向</h2>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-plus-circle text-green-500"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">多模型集成</h3>
                                <p class="text-gray-600">计划集成更多开源模型(如Claude、Llama)，提升多模态生成能力。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-purple-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-sliders-h text-purple-500"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">自定义参数调节</h3>
                                <p class="text-gray-600">增加代码风格、框架选择等参数，进一步适配专业开发需求。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-indigo-100 p-2 rounded-full mr-4 flex-shrink-0">
                                <i class="fas fa-project-diagram text-indigo-500"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">社区协作增强</h3>
                                <p class="text-gray-600">优化项目分享与协作功能，促进开源生态发展。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Quick Start -->
    <section class="py-16 px-4 md:px-0 bg-indigo-600 text-white">
        <div class="container mx-auto max-w-6xl text-center">
            <h2 class="text-3xl font-bold mb-6">立即开始您的自然语言编程之旅</h2>
            <p class="text-xl mb-8 max-w-3xl mx-auto">只需简单描述您的想法，DeepSite将为您生成完整代码和应用界面</p>
            
            <div class="bg-white bg-opacity-10 rounded-xl p-8 max-w-3xl mx-auto mb-10">
                <div class="flex flex-col md:flex-row gap-4 mb-6">
                    <div class="flex-1">
                        <label class="block text-left text-sm font-medium mb-2 opacity-80">输入您的需求描述</label>
                        <div class="bg-white bg-opacity-20 rounded-lg p-4 border border-white border-opacity-30">
                            <p class="italic">"生成一个带有计分功能的乒乓球游戏"</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-center">
                        <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium transform hover:scale-105 transition duration-300">
                            <i class="fas fa-magic mr-2"></i> 生成代码
                        </button>
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4 text-left">
                    <div>
                        <h3 class="font-semibold mb-2">操作步骤</h3>
                        <ol class="list-decimal list-inside space-y-2 text-sm">
                            <li>访问DeepSite平台</li>
                            <li>输入自然语言指令</li>
                            <li>等待数秒查看结果</li>
                            <li>下载代码或在线调试</li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="font-semibold mb-2">实用技巧</h3>
                        <ul class="list-disc list-inside space-y-2 text-sm">
                            <li>使用具体的技术术语</li>
                            <li>分步描述复杂需求</li>
                            <li>参考示例优化提示词</li>
                            <li>加入样式偏好描述</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <a href="https://huggingface.co/spaces/enzostvs/deepsite" target="_blank" class="inline-block bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-medium text-lg transition duration-300 transform hover:scale-105">
                <i class="fas fa-external-link-alt mr-2"></i> 前往DeepSite体验
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-xl font-semibold text-white mb-2">技术小馆</h3>
                    <p class="text-sm">探索前沿技术，分享开发经验</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" target="_blank" class="text-indigo-400 hover:text-indigo-300 transition duration-300 flex items-center">
                        <i class="fas fa-external-link-alt mr-2"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
                <p>© 2023 DeepSite - 自然语言编程工具. 本页面内容仅供参考，实际功能以官方平台为准.</p>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>